<template>
   
<div @click="clickMe('div')">
    <p  @click="clickMe('p')">
        <button @click.stop="clickMe('btn')">
            按钮
        </button>
    </p>
</div>

<div @click="clickMe('div')">
    <p  @click.capture="clickMe('p')">
        <button @click="clickMe('btn')">
            按钮
        </button>
    </p>
</div>

<div title="self修饰符" @click.self="selfClick" style="background-color: aqua; padding: 20px;" > 
    <p style="background-color: violet;">
        <button>
            .self修饰符
        </button>
    </p>
</div>

<h2>键盘修饰符</h2>
<p>
    <input type="text" @keyup.enter="onKeyup">
</p>

<h2>系统按键修饰符</h2>
<p>
    <button @click.ctrl="clickMe">ctrl</button>
    <button @click.shift="clickMe">shift</button>
    <button @click.alt="clickMe">alt</button>
    <button @click.meta="clickMe">meta</button>
    <button @click.shift.ctrl="clickMe">ctrl+shift</button>
</p>

<h2>鼠标修饰符</h2>
<p>
    <button @click.left="clickMe">左键</button>
    <button @click.middle="clickMe">中键</button>
    <button @click.right="clickMe">右键</button>
</p>

<p>
    <input type="radio" value="male" v-model="gender">男
    <input type="radio" value="female" v-model="gender">女
</p>

<p>
    <input type="checkbox" v-model="accept" value="同意">我同意协议
    {{ accept }}
</p>

<p>
    <input type="checkbox" v-model="argee" true-value="同意" false-value="不同意">我{{ argee }}协议
</p>

<select v-model="education">
    <option :value="item.value" v-for="item in educations" :key="item">
        {{ item.label }}
    </option>
</select>
<p>你的学历是{{ education }}</p>

<p>
    <input type="checkbox" value="篮球" v-model="sports">篮球
    <input type="checkbox" value="足球" v-model="sports">足球
    <input type="checkbox" value="乒乓球" v-model="sports">乒乓球
</p>


</template>

<script>
export default {
data(){
    return{
        sports:['篮球','足球'],
        total:0,
        gender:'female',
        accept:true,
        argee:'不同意',

        education:'高中',
        educations: [
        {
          label: '初中学历',
          value: '初中'
        },
        {
          label: '高中学历',
          value: '高中'
        },
        {
          label: '大学学历',
          value: '大学'
        },
      ],
    
    }
},

methods:{
  clickMe(name){
    console.log(name+'被点击了');
  },
  selfClick(event){
    console.log(event.target.title+'被点击了');
    },

    // 键盘修饰符
    clickMe(){
        console.log('触发');
    },
}
}


</script>

<style>

</style>